<template>
  <div class="app-container">
    <div style="padding: 10px;">
      <el-button type="primary" @click="handleWindowPrint( '#demo', '培训流水号-'+trainId )">打印</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-back" @click="goBack">返回
      </el-button>
    </div>

    <div id="demo">
      <p style="padding: 10px;">【培训记录】 &nbsp &nbsp流水号-{{ trainId }}</p>

      <table class="MsoNormalTable" border="1" cellspacing="0" cellpadding="0"
             width="0" style="border-collapse:collapse;mso-table-layout-alt:fixed;border:
 none;mso-border-alt:solid windowtext .5pt;mso-table-overlap:never;mso-yfti-tbllook:
 1184;mso-table-lspace:9.05pt;margin-left:6.8pt;mso-table-rspace:9.05pt;
 margin-right:6.8pt;mso-table-anchor-vertical:paragraph;mso-table-anchor-horizontal:
 page;mso-table-left:center;mso-table-top:.05pt;mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
 mso-border-insideh:.5pt solid windowtext;mso-border-insidev:.5pt solid windowtext"
      >
        <tr style="mso-yfti-irow:0;mso-yfti-firstrow:yes;height:6.25pt">
          <td width="123" style="width:92.15pt;border:solid windowtext 1.0pt;mso-border-alt:
  solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:6.25pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center;line-height:22.0pt;
  mso-line-height-rule:exactly;mso-element:frame;mso-element-frame-hspace:9.05pt;
  mso-element-wrap:around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
  page;mso-element-left:center;mso-element-top:.05pt;mso-height-rule:exactly"
            ><span
              style="font-size:16.0pt;font-family:仿宋;letter-spacing:2.15pt;mso-font-width:
  95%"
            >姓名<span lang="EN-US"></span></span></p>
          </td>
          <td width="214" style="width:160.6pt;border:solid windowtext 1.0pt;border-left:
  none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:6.25pt"
          >
            <p class="MsoNormal" style="text-align:center"><span
              lang="EN-US" style="font-size:15.0pt;font-family:仿宋"
            >{{ trainForm.userName }}</span></p>
          </td>
          <td width="124" style="width:92.85pt;border:solid windowtext 1.0pt;border-left:
  none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:6.25pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center;line-height:22.0pt;
  mso-line-height-rule:exactly;mso-element:frame;mso-element-frame-hspace:9.05pt;
  mso-element-wrap:around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
  page;mso-element-left:center;mso-element-top:.05pt;mso-height-rule:exactly"
            ><span
              style="font-size:16.0pt;font-family:仿宋;letter-spacing:2.15pt"
            >部门<span
              lang="EN-US"
            ></span></span></p>
          </td>
          <td width="151" style="width:4.0cm;border:solid windowtext 1.0pt;border-left:
  none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:6.25pt"
          >
            <p class="MsoNormal" style="text-align:center"
            ><span lang="EN-US"
                   style="font-size:16.0pt;font-family:仿宋;letter-spacing:2.15pt"
            >{{ trainForm.userDept }}</span></p>
          </td>
        </tr>
        <tr style="mso-yfti-irow:1;height:6.25pt">
          <td width="123" style="width:92.15pt;border:solid windowtext 1.0pt;border-top:
  none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:6.25pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center;line-height:22.0pt;
  mso-line-height-rule:exactly;mso-element:frame;mso-element-frame-hspace:9.05pt;
  mso-element-wrap:around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
  page;mso-element-left:center;mso-element-top:.05pt;mso-height-rule:exactly"
            ><span
              style="font-size:16.0pt;font-family:仿宋;letter-spacing:2.15pt;mso-font-width:
  95%"
            >人员类别<span lang="EN-US"></span></span></p>
          </td>
          <td width="214" style="width:160.6pt;border-top:none;border-left:none;
  border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:6.25pt"
          >
            <p class="MsoNormal" style="text-align:center"
            ><span
              lang="EN-US" style="font-size:15.0pt;font-family:仿宋"
            >{{ trainForm.userLeibie }}</span></p>
          </td>
          <td width="124" style="width:92.85pt;border-top:none;border-left:none;
  border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:6.25pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center;line-height:22.0pt;
  mso-line-height-rule:exactly;mso-element:frame;mso-element-frame-hspace:9.05pt;
  mso-element-wrap:around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
  page;mso-element-left:center;mso-element-top:.05pt;mso-height-rule:exactly"
            ><span
              style="font-size:16.0pt;font-family:仿宋;letter-spacing:2.15pt"
            >员工类型<span
              lang="EN-US"
            ></span></span></p>
          </td>
          <td width="151" style="width:4.0cm;border-top:none;border-left:none;border-bottom:
  solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;mso-border-top-alt:
  solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
  solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:6.25pt"
          >
            <p class="MsoNormal" style="text-align:center"
            ><span lang="EN-US"
                   style="font-size:16.0pt;font-family:仿宋;letter-spacing:2.15pt"
            >{{ trainForm.userLeixing }}</span></p>
          </td>
        </tr>
        <tr style="mso-yfti-irow:2;height:25.0pt">
          <td width="123" style="width:92.15pt;border:solid windowtext 1.0pt;border-top:
  none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:25.0pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center;line-height:22.0pt;
  mso-line-height-rule:exactly;mso-element:frame;mso-element-frame-hspace:9.05pt;
  mso-element-wrap:around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
  page;mso-element-left:center;mso-element-top:.05pt;mso-height-rule:exactly"
            ><span
              style="font-size:16.0pt;font-family:仿宋;letter-spacing:2.15pt;mso-font-width:
  95%"
            >课程名称<span lang="EN-US"></span></span></p>
          </td>
          <td width="214" style="width:160.6pt;border-top:none;border-left:none;
  border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:25.0pt"
          >
            <p class="MsoNormal" style="text-align:center"
            ><span
              lang="EN-US" style="font-size:15.0pt;font-family:仿宋"
            >{{ trainForm.trainName }}</span></p>
          </td>
          <td width="124" style="width:92.85pt;border-top:none;border-left:none;
  border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:25.0pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center;line-height:22.0pt;
  mso-line-height-rule:exactly;mso-element:frame;mso-element-frame-hspace:9.05pt;
  mso-element-wrap:around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
  page;mso-element-left:center;mso-element-top:.05pt;mso-height-rule:exactly"
            ><span
              style="font-size:16.0pt;font-family:仿宋;letter-spacing:2.15pt"
            >培训类型<span
              lang="EN-US"
            ></span></span></p>
          </td>
          <td width="151" style="width:4.0cm;border-top:none;border-left:none;border-bottom:
  solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;mso-border-top-alt:
  solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
  solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:25.0pt"
          >
            <p class="MsoNormal" style="text-align:center"
            ><span
              style="font-size:16.0pt;font-family:仿宋;letter-spacing:2.15pt"
            >{{ trainForm.trainType }}<span
              lang="EN-US"
            ></span></span></p>
          </td>
        </tr>
        <tr style="mso-yfti-irow:3;height:25.25pt">
          <td width="123" style="width:92.15pt;border:solid windowtext 1.0pt;border-top:
  none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:25.25pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center;line-height:22.0pt;
  mso-line-height-rule:exactly;mso-element:frame;mso-element-frame-hspace:9.05pt;
  mso-element-wrap:around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
  page;mso-element-left:center;mso-element-top:.05pt;mso-height-rule:exactly"
            ><span
              style="font-size:16.0pt;font-family:仿宋;letter-spacing:2.15pt;mso-font-width:
  95%"
            >培训学时<span lang="EN-US"></span></span></p>
          </td>
          <td width="214" style="width:160.6pt;border-top:none;border-left:none;
  border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:25.25pt"
          >
            <p class="MsoNormal" style="text-align:center"
            ><span
              lang="EN-US" style="font-size:15.0pt;font-family:仿宋"
            >{{ trainForm.trainHours }}/小时</span></p>
          </td>
          <td width="124" style="width:92.85pt;border-top:none;border-left:none;
  border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:25.25pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center;line-height:22.0pt;
  mso-line-height-rule:exactly;mso-element:frame;mso-element-frame-hspace:9.05pt;
  mso-element-wrap:around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
  page;mso-element-left:center;mso-element-top:.05pt;mso-height-rule:exactly"
            ><span
              style="font-size:16.0pt;font-family:仿宋;letter-spacing:2.15pt"
            >培训时间<span
              lang="EN-US"
            ></span></span></p>
          </td>
          <td width="151" style="width:4.0cm;border-top:none;border-left:none;border-bottom:
  solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;mso-border-top-alt:
  solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
  solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:25.25pt"
          >
            <p class="MsoNormal" style="text-align:center"
            ><span style="font-size:16.0pt;
  font-family:仿宋;letter-spacing:2.15pt"
            >{{ trainForm.trainTime }}<span lang="EN-US"></span></span></p>
          </td>
        </tr>
        <tr style="mso-yfti-irow:4;height:60.65pt">
          <td width="123" style="width:92.15pt;border:solid windowtext 1.0pt;border-top:
  none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:60.65pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center;mso-element:frame;
  mso-element-frame-hspace:9.05pt;mso-element-wrap:around;mso-element-anchor-vertical:
  paragraph;mso-element-anchor-horizontal:page;mso-element-left:center;
  mso-element-top:.05pt;mso-height-rule:exactly"
            ><span style="font-size:16.0pt;
  font-family:仿宋"
            >课程内容<span lang="EN-US"></span></span></p>
          </td>
          <td width="489" colspan="3" valign="top" style="width:366.85pt;border-top:none;
  border-left:none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:60.65pt"
          >
            <p class="MsoNormal" style="text-align:center"
            ><span
              lang="EN-US" style="font-size:16.0pt;font-family:仿宋"
            >{{ trainForm.trainContent }}</span></p>
          </td>
        </tr>
        <tr style="mso-yfti-irow:5;height:35.4pt">
          <td width="123" style="width:92.15pt;border:solid windowtext 1.0pt;border-top:
  none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:35.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center;mso-element:frame;
  mso-element-frame-hspace:9.05pt;mso-element-wrap:around;mso-element-anchor-vertical:
  paragraph;mso-element-anchor-horizontal:page;mso-element-left:center;
  mso-element-top:.05pt;mso-height-rule:exactly"
            ><span style="font-size:16.0pt;
  font-family:仿宋"
            >备<span lang="EN-US"><span
              style="mso-spacerun:yes"
            >&nbsp;&nbsp;&nbsp; </span></span>注<span lang="EN-US"></span></span></p>
          </td>
          <td width="489" colspan="3" style="width:366.85pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:35.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center;"
            ><span lang="EN-US"
                   style="font-size:16.0pt;font-family:仿宋"
            >{{ trainForm.trainRemarks }}</span></p>
          </td>
        </tr>
        <tr style="mso-yfti-irow:6;height:35.4pt">
          <td width="123" style="width:92.15pt;border:solid windowtext 1.0pt;border-top:
  none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:35.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center;mso-element:frame;
  mso-element-frame-hspace:9.05pt;mso-element-wrap:around;mso-element-anchor-vertical:
  paragraph;mso-element-anchor-horizontal:page;mso-element-left:center;
  mso-element-top:.05pt;mso-height-rule:exactly"
            ><span style="font-size:16.0pt;
  font-family:仿宋"
            >相关证书<span lang="EN-US"></span></span></p>
          </td>
          <td width="489" colspan="3" style="width:366.85pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:35.4pt"
          >
            <el-link :href="`${baseUrl}${file}`" v-for="(file, index) in fileList" :key="index" :underline="false"
                     target="_blank"
            >
                <span class="MsoNormal" style="margin:12px;font-size:13.0pt;font-family:仿宋">  {{
                    getFileName(file)
                  }} </span>
            </el-link>
          </td>
        </tr>
        <tr v-show="checkPermi(['train:master:approval'])" style="mso-yfti-irow:6;mso-yfti-lastrow:yes;height:35.4pt">
          <td width="164" style="width:123.25pt;border:solid windowtext 1.0pt;border-top:
  none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:35.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center;mso-element:frame;
  mso-element-frame-hspace:9.05pt;mso-element-wrap:around;mso-element-anchor-vertical:
  paragraph;mso-element-anchor-horizontal:page;mso-element-left:center;
  mso-element-top:.05pt;mso-height-rule:exactly"
            ><span style="font-size:16.0pt;
  font-family:仿宋"
            >培训记录核实人<span lang="EN-US"></span></span></p>
          </td>
          <td width="448" colspan="3" style="width:335.75pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:35.4pt"
          >
            <p class="MsoNormal" style="text-align:center">
                 <span v-show="trainForm.trainIdea===0"
                       style="font-size:15.0pt;font-family:仿宋"
                 >□确定
                  <span lang="EN-US">&nbsp; &nbsp;</span>□未发生
                </span>

              <span v-show="trainForm.trainIdea===1"
                    style="font-size:15.0pt;font-family:仿宋"
              >&#9745确定
                  <span lang="EN-US">&nbsp; &nbsp;</span>□未发生
                </span>

              <span v-show="trainForm.trainIdea===2"
                    style="font-size:15.0pt;font-family:仿宋"
              >□同意
                  <span lang="EN-US">&nbsp; &nbsp;</span>&#9745不同意
                </span>
            </p>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>

import htmlToPdf from '@/utils/htmlToPdf'
import { getTrain, masterApproval, masterGetTrain } from '@/api/train/train'
import { checkPermi, checkRole } from '@/utils/permission' // 权限判断函数
export default {
  name: 'ViewTrainExcel',
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      approvalLogs: [],
      trainId: null,
      trainForm: [],
      fileList: [],
      options: [{
        value: 1,
        label: '确定'
      }, {
        value: 2,
        label: '未发生'
      }
      ],
      shengpiForm: {}
    }
  },
  filters: {
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    }
  },
  created() {
    this.trainId = this.$route.query.trainId
    this.getTrainlValue()
  },

  methods: {
    checkPermi,
    checkRole,
    getList() {
      if (0) {
        this.$message.error('id不能为空，请从下下载！')
        this.goBack()
      } else {
        this.$http({
          url: this.$http.adornUrl(`/sys/sysapprovelog/list`),
          method: 'post',
          data: {
            approve_type: 6

          }
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.approvalLogs = data.sysApproveLogs
          }
        })
      }

    },
    handleWindowPrint(ele, fileName) {
      // 留存原来的 html
      // let bdHtml = window.document.body.innerHTML;
      // let bdHtml = document.querySelector('#app').innerHTML;

      // 要打印的 内容 html
      // document.body.innerHTML =  document.querySelector('#demo').innerHTML;
      // document.body.innerHTML =  document.querySelector('#demo').outerHTML;
      // document.querySelector('#app').innerHTML =  document.querySelector('#demo').outerHTML;
      // document.querySelector('#main').innerHTML =  document.querySelector('#demo').outerHTML;

      // 去除页面不必要的 head 标签内  内容， 避免影响打印页 ， title 为保存为 pdf 的文件时的 文件名
      document.head.innerHTML = '<meta charset="utf-8">\n' +
        ' <title> ' + fileName + '</title>\n' +
        ' <meta name="format-detection" content="telephone=no">\n' +
        ' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\n' +
        ' <meta name="viewport" content="width=device-width,initial-scale=1.0">\n' +
        ' <link rel="stylesheet" href="./static/css/contract.css"/>'  // 生成pdf的外部css样式
      // document.body.innerHTML =  document.querySelector('#demo').outerHTML;
      // document.querySelector('#main').innerHTML =  document.querySelector('#demo').outerHTML;
      // document.body.innerHTML =  document.querySelector('#demo').outerHTML;
      document.body.innerHTML = document.querySelector(ele).outerHTML

      // window.print();

      // 转异步 等待dom元素渲染（样式）完毕在打印
      setTimeout(() => {
        // 打印
        window.print()
        // 刷新页面
        window.location.reload()
      }, 20)

      // 重新设会当前页面
      // window.document.body.innerHTML = bdHtml;
      // document.querySelector('#app').innerHTML =  bdHtml;
      // 刷新页面
      // window.location.reload();
    },
    getTrainlValue() {
      //指导人员或管理员
      if (checkPermi(['train:master:query'])) {
        masterGetTrain(this.trainId).then((response) => {
          this.trainForm = response.data
          if (this.trainForm.trainFile) {
            this.fileList = this.trainForm.trainFile.split(',')
          }
        })
      } else
        //普通员工
      {
        getTrain(this.trainId).then((response) => {
          this.trainForm = response.data
          if (this.trainForm.trainFile) {
            this.fileList = this.trainForm.trainFile.split(',')
          }
        })
      }
    },
    // 获取文件名称
    getFileName(name) {
      if (name.lastIndexOf('/') > -1) {
        var name1 = name.slice(name.lastIndexOf('/') + 1)
        return name1.substring(0, name1.lastIndexOf('_')) + '.' + name1.slice(name1.lastIndexOf('.') + 1)
      } else {
        return ''
      }
    },
    goBack() {
      this.$router.go(-1)
    },
    handleDown() {
      htmlToPdf.downloadPDF(document.querySelector('#demo'), '培训流水号' + '-流水号：' + this.$route.query.trainId)
    },
  }
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="ProgId" content="Word.Document">
<meta name="Generator" content="Microsoft Word 15">
<meta name="Originator" content="Microsoft Word 15">
<style>

  /* Font Definitions */
  @font-face {
    font-family: 宋体;
    panose-1: 2 1 6 0 3 1 1 1 1 1;
    mso-font-alt: SimSun;
    mso-font-charset: 134;
    mso-generic-font-family: auto;
    mso-font-pitch: variable;
    mso-font-signature: 3 680460288 22 0 262145 0;
  }

  @font-face {
    font-family: 黑体;
    panose-1: 2 1 6 9 6 1 1 1 1 1;
    mso-font-alt: SimHei;
    mso-font-charset: 134;
    mso-generic-font-family: modern;
    mso-font-pitch: fixed;
    mso-font-signature: -2147482945 953122042 22 0 262145 0;
  }

  @font-face {
    font-family: "Cambria Math";
    panose-1: 2 4 5 3 5 4 6 3 2 4;
    mso-font-charset: 1;
    mso-generic-font-family: roman;
    mso-font-pitch: variable;
    mso-font-signature: 0 0 0 0 0 0;
  }

  @font-face {
    font-family: Calibri;
    panose-1: 2 15 5 2 2 2 4 3 2 4;
    mso-font-charset: 0;
    mso-generic-font-family: swiss;
    mso-font-pitch: variable;
    mso-font-signature: -469750017 -1073732485 9 0 511 0;
  }

  @font-face {
    font-family: 仿宋;
    panose-1: 2 1 6 9 6 1 1 1 1 1;
    mso-font-charset: 134;
    mso-generic-font-family: modern;
    mso-font-pitch: fixed;
    mso-font-signature: -2147482945 953122042 22 0 262145 0;
  }

  @font-face {
    font-family: "\@黑体";
    panose-1: 2 1 6 0 3 1 1 1 1 1;
    mso-font-charset: 134;
    mso-generic-font-family: modern;
    mso-font-pitch: fixed;
    mso-font-signature: -2147482945 953122042 22 0 262145 0;
  }

  @font-face {
    font-family: "\@宋体";
    panose-1: 2 1 6 0 3 1 1 1 1 1;
    mso-font-charset: 134;
    mso-generic-font-family: auto;
    mso-font-pitch: variable;
    mso-font-signature: 3 680460288 22 0 262145 0;
  }

  @font-face {
    font-family: "\@仿宋";
    mso-font-charset: 134;
    mso-generic-font-family: modern;
    mso-font-pitch: fixed;
    mso-font-signature: -2147482945 953122042 22 0 262145 0;
  }

  /* Style Definitions */
  p.MsoNormal, li.MsoNormal, div.MsoNormal {
    mso-style-unhide: no;
    mso-style-qformat: yes;
    mso-style-parent: "";
    margin: 0cm;
    margin-bottom: .0001pt;
    text-align: justify;
    text-justify: inter-ideograph;
    mso-pagination: none;
    font-size: 10.5pt;
    mso-bidi-font-size: 12.0pt;
    font-family: "Calibri", sans-serif;
    mso-fareast-font-family: 宋体;
    mso-bidi-font-family: "Times New Roman";
    mso-font-kerning: 1.0pt;
  }

  p.paragraph, li.paragraph, div.paragraph {
    mso-style-name: paragraph;
    mso-style-unhide: no;
    mso-margin-top-alt: auto;
    margin-right: 0cm;
    mso-margin-bottom-alt: auto;
    margin-left: 0cm;
    mso-pagination: widow-orphan;
    font-size: 12.0pt;
    font-family: 宋体;
    mso-bidi-font-family: 宋体;
  }

  .MsoChpDefault {
    mso-style-type: export-only;
    mso-default-props: yes;
    font-size: 10.0pt;
    mso-ansi-font-size: 10.0pt;
    mso-bidi-font-size: 10.0pt;
    font-family: "Calibri", sans-serif;
    mso-ascii-font-family: Calibri;
    mso-fareast-font-family: 宋体;
    mso-hansi-font-family: Calibri;
    mso-font-kerning: 0pt;
  }

  /* Page Definitions */
  @page {
    mso-page-border-surround-header: no;
    mso-page-border-surround-footer: no;
  }

  @page WordSection1 {
    size: 595.3pt 841.9pt;
    margin: 72.0pt 90.0pt 72.0pt 90.0pt;
    mso-header-margin: 42.55pt;
    mso-footer-margin: 49.6pt;
    mso-paper-source: 0;
    layout-grid: 15.6pt;
  }

  div.WordSection1 {
    page: WordSection1;
  }

  /* Style Definitions */
  table.MsoNormalTable {
    mso-style-name: 普通表格;
    mso-tstyle-rowband-size: 0;
    mso-tstyle-colband-size: 0;
    mso-style-noshow: yes;
    mso-style-priority: 99;
    mso-style-parent: "";
    mso-padding-alt: 0cm 5.4pt 0cm 5.4pt;
    mso-para-margin: 0cm;
    mso-para-margin-bottom: .0001pt;
    mso-pagination: widow-orphan;
    font-size: 10.0pt;
    font-family: "Calibri", sans-serif;
    mso-bidi-font-family: "Times New Roman";
  }

</style>

</head>

<style scoped>
#demo {
  background-color: #fff;
  width: 1000px;
  /* height: 400px; */
  margin: auto;
  padding: 40px;
  box-sizing: border-box;
}

.shengpiForm {
  background-color: #fff;
  width: 1000px;
  /* height: 400px; */
  height: 100%;
  margin: auto;
  padding: 5px 40px;
  box-sizing: border-box;
}
</style>
